<template>
	<view class="container">
		<view class="v-header">
			<view class="v-header-top">
				<view class="v-header-left">
					<view class="v-header-group">
						<view class="v-account">{{ datas.UserInfo.NickName }}</view>
						<view class="v-role">{{ datas.UserInfo.IsVIP === true ? 'VIP会员' : '普通会员' }}</view>
					</view>
					<view class="v-header-group">
						<view class="v-invitecode">邀请码：{{ datas.UserInfo.InviteCode }}</view>
						<view class="v-btn-copy" @click="copyText">复制</view>
					</view>
				</view>
				<view class="v-header-right">
					<image :src="datas.UserInfo.Icon" mode="aspectFit"></image>
				</view>
			</view>
		<!-- 	<view class="v-header-middle">
				<view class="v-header-middle-title">累计收益（￥）：{{ datas.StatisticInfo.WDSY_LJ||0.0 }}</view>
				<view class="v-header-middle-content"> </view>
			</view> -->
			<view class="v-header-bottom">
				<view class="v-header-bottom-right" >
					<view class="v-header-group" style="height: 100% !important; align-items: center; justify-content: center">
						<view class="v-header-left" style="margin-right: 10rpx">
							<image src="../../static/LJSY.png" mode="aspectFit" style="width: 80rpx; height: 80rpx"></image>
						</view>
						<view class="v-header-item" style="margin-bottom: 0;width:70%">
							<view class="v-header-statictis">{{ datas.StatisticInfo.WDSY_LJ||0.0 }}</view>
							<view class="v-header-title">我的收益</view>
						</view>
					</view>
					<view class="v-header-group" @click="statisticNav(3)" style="height: 100% !important; align-items: center; justify-content: center">
						<view class="v-header-left" style="margin-right: 10rpx">
							<image src="../../static/yhq.png" mode="aspectFit" style="width: 80rpx; height: 80rpx"></image>
						</view>
						<view class="v-header-item" style="margin-bottom: 0;width:70%">
							<view class="v-header-statictis">{{ datas.StatisticInfo.YHQ }}</view>
							<view class="v-header-title">优惠券</view>
						</view>
					</view>
				</view>
				<view class="v-header-bottom-left">
					<view class="v-header-item">
						<view class="v-header-statictis">{{ datas.StatisticInfo.JRYJ }}</view>
						<view class="v-header-title">今日业绩</view>
					</view>
					<view class="v-header-item" @click="statisticNav(1)">
						<view class="v-header-statictis">{{ datas.StatisticInfo.TDYJ }}</view>
						<view class="v-header-title">团队业绩</view>
					</view>
					<view class="v-header-item">
						<view class="v-header-statictis">{{ datas.StatisticInfo.WDSY }}</view>
						<view class="v-header-title">今日收益</view>
					</view>
					<view class="v-header-item" @click="statisticNav(2)">
						<view class="v-header-statictis">{{ datas.StatisticInfo.WDTD }}</view>
						<view class="v-header-title">我的团队</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="v-content">
			<view class="v-menu-container">
				<view class="v-menu-item" v-for="(item, index) in datas.Menus" @click="nav(item)">
					<image :src="item.ImageSrc" mode="aspectFit"></image>
					<view class="v-menu-item-title" style="flex: 1">
						{{ item.Title }}
					</view>
					<image src="../../static/icon-jkh.png" mode="aspectFit" style="justify-self: flex-end; height: 30rpx; width: 30rpx"></image>
				</view>
				<!-- 仅在H5平台显示的组件 -->
				<!-- #ifdef H5 -->
				<view class="v-menu-item" @click="nav(datas.Menu_App_Item)">
					<image :src="datas.Menu_App_Item.ImageSrc" mode="aspectFit"></image>
					<view class="v-menu-item-title" style="flex: 1">
						{{ datas.Menu_App_Item.Title }}
					</view>
					<image src="../../static/icon-jkh.png" mode="aspectFit" style="justify-self: flex-end; height: 30rpx; width: 30rpx"></image>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<uni-popup ref="message" type="message" class="pop-msg">
			<uni-popup-message :type="msgType" :message="messageText" :duration="duration"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
import { dateUtils, authTokenUtil, validLoginToken } from '../../common/util.js';
export default {
	data() {
		return {
			messageText: '',
			msgType: 'success',
			duration: 2000,

			datas: {
				UserInfo: {
					Id: '',
					ParentId: '',
					Account: '',
					NickName: '知念',
					InviteCode: '9999',
					Icon: '../../static/logo.png',
					IsVIP: false
				},
				StatisticInfo: {
					JRYJ: '---',
					TDYJ: '---',
					WDSY: '---',
					WDTD: '---',
					YHQ: '---',
					WDSY_LJ: '---',
				},
				Menus: [
					{
						Id: 1,
						ImageSrc: '../../static/icon-order.png',
						Title: '商城订单'
					},
					{
						Id: 2,
						ImageSrc: '../../static/icon-product.png',
						Title: '我的产品'
					},
					{
						Id: 3,
						ImageSrc: '../../static/icon-card.png',
						Title: '实名认证'
					},
					{
						Id: 4,
						ImageSrc: '../../static/icon-invite.png',
						Title: '邀请好友'
					},
					{
						Id: 5,
						ImageSrc: '../../static/icon-pos.png',
						Title: '收货地址'
					},
					{
						Id: 6,
						ImageSrc: '../../static/icon-setting.png',
						Title: '设置'
					}
				],
				Menu_App_Item: {
					Id: 7,
					ImageSrc: '../../static/icon-app.png',
					Title: 'APP下载'
				}
			}
		};
	},
	methods: {
		copyText: function () {
			let _this = this;
			uni.setClipboardData({
				data: `${_this.datas.UserInfo.InviteCode}`,
				success: function () {
					uni.showToast({
						title: '复制成功',
						icon: 'success',
						duration: 2000
					});
				}
			});
		},
		getServerPath: function (url) {
			let _this = this;
			console.log(`${_this.sysInfo.ImageBasePath}${url}`);
			return `${_this.sysInfo.ImageBasePath}${url}`;
		},
		loadMeInfo: function () {
			let _this = this;
			//正式代码
			var authToken = authTokenUtil();

			uni.request({
				url: _this.sysInfo.BasePath + 'Sys/GetUserStatisticInfo',
				method: 'POST',
				data: null,
				header: {
					'content-type': 'application/json',
					Authorization: `${authToken}`
				},
				success: (res) => {
					if (res && res.data && res.data.Succeeded === true) {
						console.log(res);
						_this.datas.UserInfo = res.data.Data.UserInfo;
						if (!_this.datas.UserInfo.Icon) {
							_this.datas.UserInfo.Icon = '../../static/logo.png';
						} else {
							_this.datas.UserInfo.Icon = _this.getServerPath(_this.datas.UserInfo.Icon);
						}

						console.log(_this.datas.UserInfo.Icon, 99999);

						_this.datas.StatisticInfo.JRYJ = res.data.Data.JRYJ;
						_this.datas.StatisticInfo.TDYJ = res.data.Data.TDYJ;
						_this.datas.StatisticInfo.WDSY = res.data.Data.WDSY;
						_this.datas.StatisticInfo.WDTD = res.data.Data.WDTD;
						_this.datas.StatisticInfo.YHQ = res.data.Data.YHQ;
						_this.datas.StatisticInfo.WDSY_LJ = res.data.Data.WDSY_LJ;
						
					} else {
						_this.sysUtils.tip({
							sender: _this,

							title: '加载我的信息失败！',
							icon: 'error'
						});
					}
				},
				fail: () => {
					_this.sysUtils.tip({
						sender: _this,
						title: '加载我的信息失败！',
						icon: 'error'
					});
				},
				complete: () => {}
			});
		},
		statisticNav: function (type) {
			let _this = this;
			switch (type) {
				case 1: //团队业绩
					uni.navigateTo({
						url: `/pages/sys/team-performance?UserId=${_this.datas.UserInfo.Id}`
					});
					break;
				case 2: //我的团队
					uni.navigateTo({
						url: `/pages/sys/my-team?UserId=${_this.datas.UserInfo.Id}`
					});
					break;
				//优惠券
				case 3:
					uni.navigateTo({
						url: '/pages/sys/my-coupon'
					});
					break;
				default:
					break;
			}
		},
		nav: function (item) {
			let _this = this;
			switch (item.Id) {
				case 1:
					uni.navigateTo({
						url: '/pages/store/order'
					});
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/store/my-products'
					});
					break;
				case 3:
					break;
				case 4:
					uni.navigateTo({
						url: '/pages/sys/invite-friends'
					});
					break;
				case 5:
					uni.navigateTo({
						url: '/pages/sys/address-list'
					});
					break;
				case 6:
					uni.navigateTo({
						url: '/pages/sys/settings'
					});
					break;
				case 7:
					console.log('case 7:');
					// uni.downloadFile({
					// 	url: this.sysInfo.ImageBasePath + 'zhinian.apk', //仅为示例，并非真实的资源
					// 	success: (res) => {
					// 		if (res.statusCode === 200) {
					// 			console.log('下载成功');
					// 		}
					// 	}
					// });
					window.open(this.sysInfo.ImageBasePath + 'zhinian.apk');
					break;
				default:
					break;
			}
		},
		init: function () {
			let _this = this;
			console.log('init');
			_this.loadMeInfo();
		}
	},
	onShow() {
		let _this = this;
		_this.init();
	},
	created() {
		let _this = this;
		validLoginToken(null, () => {
			uni.reLaunch({
				url: '/pages/account/login'
			});
		});
		// _this.init();
	}
};
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	/* background-color: #f0f0f0; */
	/* position: fixed;
	height: 100%; */
	width: 100%;
}

.v-header {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	height: 650rpx;
	background: #c93a00ff;
	border-radius: 0 0 30rpx 30rpx;
	padding: 40rpx;
	padding-top: 50rpx;
	box-sizing: border-box;
	color: #fff;
	font-size: 26rpx;
}

.v-header-top {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
}

.v-header-left {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	flex: 1;
}

.v-header-right {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: stretch;
	flex: 1;
}
.v-invitecode{
	width:200rpx;
}
.v-header-group {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	height: 80rpx;
}

.v-header-top .v-header-right image {
	width: 130rpx;
	height: 130rpx;
	border-radius: 100rpx;
}

.v-account {
	font-size: 38rpx;
	font-weight: bold;
	margin-right: 30rpx;
}

.v-role {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 120rpx;
	height: 40rpx;
	background-color: #df8c3fff;
	font-size: 26rpx;
	border-radius: 10rpx;
}

.v-btn-copy {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 120rpx;
	height: 50rpx;
	border: 2rpx #fff solid;
	margin-left: 20rpx;
	border-radius: 50rpx;
	font-size: 26rpx;
}
.v-header-middle{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	
	border-bottom: solid 1px #fff;
	height:60rpx;
	margin-top: 20rpx;
}
.v-header-middle-title{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	font-size: 28rpx;
	font-weight:bold;
	
}
.v-header-middle-content{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	font-size: 28rpx;
	font-weight:bold;
	flex:1;
}
.v-header-bottom {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	margin-top:50rpx;
}

.v-header-bottom-left {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	flex: 1;
	padding:20rpx 0rpx;
}

.v-header-bottom-right {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	width: 300rpx;
	padding-right: 20rpx;
	border-right: solid 1px #fff;
	margin:20rpx 0rpx;
	box-sizing:border-box;
}

.v-header-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width:50%;
	height:120rpx;
}

.v-header-item:nth-child(2n) {
	margin-right: 0;
}

.v-header-statictis {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 26rpx;
	color: #fff;
	font-weight: bold;
}

.v-header-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 10rpx;
	font-size: 26rpx;
}

.v-content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	margin-top: -120rpx;
	backgroud: #fff;
	width: 100%;
	margin-bottom: 50rpx;
}

.v-menu-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	flex: 1;
	margin: 50rpx;
	background-color: #fff;
	padding: 20rpx;
	border-radius: 10rpx;
	box-shadow: 0px 0px 5px #ccc;
}

.v-menu-item {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	height: 100rpx;
	font-size: 26rpx;
	cursor: pointer;
}

.v-menu-item image {
	height: 50rpx;
	width: 50rpx;
	margin-right: 20rpx;
}
</style>
